<template>
    <div class="broadcast" v-show="isShow">
        <span class="broadcast-logo"><i :class="volumeClass" ></i></span>
        <span class="broadcast-notice">{{sysMsg.content}}</span>
    </div>
</template>
<script>
    export default{
        name:"broadcast",
        data(){
            return{
                volumeClass:'',
                sysMsg:{},
                isShow:true ,
                timer:null
            }
        },
        watch:{
            isShow: function isShow(val) {
                this.changeLogo();
            },
        },
        methods:{
            changeLogo(){
                if(!this.isShow){
                    window.clearInterval(this.timer);
                    this.timer = null;
                    return;
                }
                let faVolume = ['fa fa-volume-off','fa fa-volume-down','fa fa-volume-up'];
                let _left = this;
                let i = 1;
                this.timer = window.setInterval(()=>{
                    _left.volumeClass = faVolume[i-1];
                    if(i%3 == 0){
                        i = 0;
                    }
                    i++;
                },500);
            },

            //获取系统消息
            getUserMsg() {
                this.$api.Msg.listSys().then((data) => {
                    if (data && data.code === 0) {
                        this.sysMsg = data.data;
                        this.checkDateOut();
                        let _self = this;
                        window.setInterval(()=>{
                            _self.checkDateOut();
                        },5000);
                        this.changeLogo();
                    } else {
                        this.sysMsg = {}
                    }
                })
            },
            //检测时间是否超时
            checkDateOut(){
                let old = new Date(this.sysMsg.lastUpdateTime);
                let now = new Date();
                let val = now.getTime()-old.getTime();
                let result = Math.floor(val/(3600000)); //算出最后相差天数
                // let result = Math.floor(val/(60000)); //算出最后相差天数
                if(result < 1){
                   this.isShow = true;
                }else{
                    this.isShow = false;
                }
            },
        },
        mounted(){
            this.getUserMsg();
            this.changeLogo();
        },
    }
</script>
<style>
    .broadcast{
        line-height: 20px;

        position: fixed;
        top: 55px;
        right: 0;
        left: 0;
        z-index: 1030;
        height: 20px;
        width: 100%;
        padding: 5px 20px;

        text-align: center;
    }

    .broadcast-logo{
        color: red;
        font-size: 15px;
        width: 10px;
    }

    .broadcast-notice{
        margin-left: 15px;
        font-size: 13px;
        overflow: hidden;
        width: 100%;
    }
</style>